@import '~@/scss/GlobalVariables';

// Colors
$color-white: #fff;

// Green Filled Button Colors
$green-filled-button-background: #3bc1aa;
$green-filled-button-background--hover: #3ed7bc;
$green-filled-button-background--click: #269983;

// Red Filled Button Colors
$red-filled-button-background: #ff436d;
$red-filled-button-background--hover: #ff7795;
$red-filled-button-background--click: #ff5a7f;
$collapse-button-color: $dark-blue-12;

.modal-content-container {
  padding: 10px;
}

.collapse-container {
  margin-bottom: 10px;
  &:last-child {
    margin: 0;
  }

  ul.networks {
    max-height: 300px;
    overflow-y: auto;
    li {
      padding: 10px 5px;
      border-bottom: 1px solid #ececec;
      &:last-child {
        border: 0;
      }

      .network-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 0;
      }

      .network-title {
        display: flex;
        align-items: center;
        margin-bottom: 5px;

        .network-icon-container {
          width: 35px;
          height: 35px;
          text-align: center;
          background-color: $dark-grey-11;
          border-radius: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 10px;
          overflow: hidden;
          img {
            height: 60%;
            margin: 0;
          }

          .no-icon {
            text-align: center;

            p {
              font-weight: 700;
              font-size: 10px;
              line-height: 10px;
            }
          }
        }

        p {
          font-size: 18px;
          font-weight: 500;
        }
      } // .network-title
    } // li
  } // ul

  .collapse-content {
    padding: 10px;
  }

  .collapse-open-button {
    width: 100%;
    background-color: $collapse-button-color !important;
    border-color: $collapse-button-color !important;
    display: flex;
    align-items: center;

    .network {
      display: flex;
      align-items: center;
    }

    p {
      text-align: left;
      font-weight: 600;
      color: white;
    }
    .network-name {
      font-weight: 400;
      font-size: 12px;
      margin-left: 5px;
    }

    div {
      p {
        line-height: 16px;
      }
    }

    .right-button {
      margin-left: auto;
    }

    .button-number {
      $number-size: 20px;

      border: 1px solid white;
      border-radius: 100%;
      margin-right: 10px;
      width: $number-size;
      height: $number-size;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.modal-body .button-container button {
  width: 100%;
}

.error-message-container {
  color: $red-1 !important;
  margin: 7px 0 0 15px;
}

.modal-network-and-address {
  .content-container-1 {
    //margin: -20px -40px 0;
    padding: 0 0;

    .hd-derivation {
      align-items: center;
      display: flex;

      .dropdown-button-container {
        margin-left: auto;
      }
    }

    .derivation-brands {
      font-size: 12px;
      padding: 15px 0;
      text-align: left;
    }
  } // .content-container-1

  .content-container-2 {
    background-color: $background-color-1;
    margin: 0 -20px;
    margin-bottom: 30px;
    padding: 0;

    .address-nav {
      padding: 10px 0;
      text-align: center;

      span {
        cursor: pointer;
        padding: 2px 10px;
      }
    }

    .address-block-container {
      .block-title {
        padding: 15px 25px;
      }

      .address-data:nth-child(even) {
        background-color: $background-color-white;
      }

      .address-block {
        color: $text-color-3;
        cursor: pointer;
        display: grid;
        grid-column-gap: 15px;
        grid-template-columns: 35px 1fr 35px;
        padding: 8px 25px;
        align-items: center;

        &.threes {
          grid-template-columns: 35px 1fr 35px;
        }

        &.fours {
          grid-template-columns: 35px 1fr 75px 20px !important;
        }

        &.table-header {
          background-color: $background-color-4;
          color: $text-base-color;
          font-weight: 600;
        }

        &.selected {
          color: $text-color-6;
          font-weight: 500;
        }

        li {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}

.network-content {
  p {
    //background-color: $light-grey-1;
    cursor: pointer;
    border-radius: 5px;
    padding: 2px 7px;
    user-select: none;
    font-size: 13px;
    font-family: 'Inconsolata', monospace;
  }

  .current-network {
    background-color: $dark-blue-2;
    color: $white;
  }
}

.custom-path-container {
  margin-top: 10px;
  margin-bottom: 10px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: [col] 15% [col] 85%;
  grid-template-rows: [row] auto [row] auto [row];
  label {
    border: 0;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 10px;
    padding: 10px;
  }

  input {
    background-color: $background-color-1;
    border: 0;
    font-size: 14px;
    padding: 10px;
    //width: 50%;
  }

  .submit-button {
    text-align: center;
    user-select: none;
    font-weight: 500;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;

    &.cancel {
      background-color: $red-filled-button-background;
      border: 1px solid $red-filled-button-background;
    }

    &.submit {
      background-color: $green-filled-button-background;
      border: 1px solid $green-filled-button-background;
    }

    color: $color-white;

    &:hover {
      background-color: $green-filled-button-background--hover;
      border: 1px solid $green-filled-button-background--hover;
    }

    &:active {
      background-color: $green-filled-button-background--click;
      border: 1px solid $green-filled-button-background--click;
    }
  }
}

.custom-networks {
  display: grid;
  grid-column-gap: 35px;
  grid-template-columns: 1fr 1fr;
}

.network-submit {
  background-color: $mew-green;
  border: 1px solid $white;
  border-radius: 6px;
  color: $white;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  padding: 15px 40px;
  user-select: none;
}

.disabled {
  background-color: $dark-grey-11 !important;
  border: 1px solid $dark-grey-11;
  color: $light-grey-6;
  pointer-events: none;
}

.input-container {
  display: flex;
  flex-direction: column;
  padding: 10px 0;

  input {
    background-color: $light-grey-2;
    border: none;
    padding: 15px;
  }

  label {
    color: $dark-blue-12;
    font-weight: bold;
  }
}

%network-inputs {
  align-items: center;
  display: flex;
  width: 100%;
}

.network-password-input {
  @extend %network-inputs;

  position: relative;

  img {
    cursor: pointer;
    position: absolute;
    right: 10px;
  }

  input {
    flex: auto;
  }
}
